define([], () => {

  const News = {
    template: `
    <div class="am-g newatype">

      <!-- left -->
      <div class="am-u-sm-12 am-u-md-8">

        <!-- 当前大赛优秀案例 -->
        <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
          <h2 class="am-titlebar-title ">
            当前大赛优秀案例
          </h2>
          <nav class="am-titlebar-nav">
            <a href="#more">more &raquo;</a>
          </nav>
        </div>

        <div data-am-widget="list_news" class="am-list-news am-list-news-default am-margin-top-0">
          <div class="am-list-news-bd">
            <ul class="am-list">
              <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left"
                  data-am-scrollspy="{ animation:'fade' }"
                  v-for="(item, index) in goodWorks"
                  :class="{ 'dg-border-top-0': index === 0 }">
                <div class="am-u-sm-5 am-list-thumb">
                  <a href="#">
                    <img src="./static/1.jpg" alt="我最喜欢的一张画"/>
                  </a>
                </div>

                <div class=" am-u-sm-7 am-list-main">
                  <h3 class="am-list-item-hd"><a href="">作品</a></h3>
                  <div class="am-list-item-text">作品介绍作品介绍作品介绍作品介绍作品介绍作品介绍作品介绍作品介绍作品介绍作品介绍</div>
                </div>
              </li>
            </ul>
          </div>

          <a href="#"><img src="./static/ad2.png" class="am-img-responsive" width="100%"/></a>

          <div class="am-hide-sm">
            <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
              <h2 class="am-titlebar-title ">
                促销活动
              </h2>
              <nav class="am-titlebar-nav">
                <a href="#more" onclick="$('.case').hide();$('#youxi').show();">游戏案例</a>
                <a href="#more" onclick="$('.case').hide();$('#yingxiao').show();">营销案例</a>
                <a href="#more" onclick="$('.case').hide();$('#gongju').show();">工具案例</a>
              </nav>
            </div>

            <div id="youxi" class="case am-animation-slide-left">
              <ul class="am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-4 am-gallery-overlay" data-am-gallery="{ pureview: true }" >
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
              </ul>
            </div>

            <div id="yingxiao" class="case am-animation-slide-right dn">
              <ul class="am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-4 am-gallery-overlay" data-am-gallery="{ pureview: true }" >
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
              </ul>
            </div>

            <div id="gongju" class="dn case am-animation-slide-right">
              <ul class="am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-4 am-gallery-overlay" data-am-gallery="{ pureview: true }" >
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="am-gallery-item">
                    <a href="./static/dd.jpg">
                      <img src="./static/cc.jpg" data-replace-img="./static/dd.jpg" alt="远方 有一个地方 那里种有我们的梦想"/>
                      <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                      <div class="am-gallery-desc">2375-09-26</div>
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- right -->
      <div class="am-u-sm-12 am-u-md-4">

        <!-- 优秀设计师 -->
        <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
          <h2 class="am-titlebar-title ">
            优秀设计师
          </h2>
          <nav class="am-titlebar-nav">
            <a href="#more">more &raquo;</a>
          </nav>
        </div>
        <div data-am-widget="list_news" class="am-list-news am-list-news-default am-padding-horizontal right-bg am-padding-horizontal am-margin-top-0" data-am-scrollspy="{ animation:'fade' }">
          <ul class="am-list">
            <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" v-for="(works, index) in goodDesigners">
              <hr data-am-widget="divider" style="" class="am-divider am-divider-default am-margin-top-0" v-if="index !== 0" />
              <div class="am-u-sm-4 am-list-thumb">
                <a href="#">
                  <img src="./static/face.jpg" class="am-round">
                </a>
              </div>

              <div class=" am-u-sm-8 am-list-main">
                <h3 class="am-list-item-hd"><a href="#">设计师名称</a></h3>
                <div class="am-list-item-text">设计师介绍设计师介绍设计师介绍设计师介绍设计师介绍设计师介绍</div>
              </div>
            </li>
          </ul>
        </div>

        <!-- ====================================================== -->

        <!-- 产品速递 -->
        <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
          <h2 class="am-titlebar-title ">
            产品速递
          </h2>
          <nav class="am-titlebar-nav">
            <a href="#">more &raquo;</a>
          </nav>
        </div>
        <div data-am-widget="list_news" class="am-list-news am-list-news-default right-bg am-padding-horizontal am-margin-top-0" data-am-scrollspy="{ animation:'fade' }">
          <ul class="am-list">
            <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left" v-for="(works, index) in newWorks">
              <hr data-am-widget="divider" style="" class="am-divider am-divider-default am-margin-top-0" v-if="index !== 0" />
              <div class="am-u-sm-4 am-list-thumb">
                <a href="#">
                  <img src="./static/face.jpg" class="am-radius"/>
                </a>
              </div>
              <div class=" am-u-sm-8 am-list-main">
                <h3 class="am-list-item-hd"><a href="#">产品</a></h3>
                <div class="am-list-item-text">产品介绍产品介绍产品介绍产品介绍产品介绍</div>
              </div>
            </li>
          </ul>
        </div>

        <!-- ====================================================== -->

        <!-- 评论文字 -->
        <ul class="am-gallery am-avg-sm-1 am-avg-md-1 am-avg-lg-1 am-gallery-default" data-am-gallery="{ pureview: true }" >
          <li v-for="designer in goodDesigners">
            <div class="am-gallery-item">
              <a href="#" class="">
                <!-- <img src="./static/face.jpg"  alt="远方 有一个地方 那里种有我们的梦想"/> -->
                <h3 class="am-gallery-title">远方 有一个地方 那里种有我们的梦想</h3>
                <div class="am-gallery-desc">
                  <div class="am-fr">北京</div>
                  <div class="am-fl">2016/11/11</div>
                </div>
              </a>
            </div>
          </li>
        </ul>
      </div>

    </div>
    `.replace(/[\r\n]/g, ""),
    data() {
      return {
        goodWorks: [
          {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, 
        ],
        goodDesigners: [
          {}, {}, {}, {} 
        ],
        newWorks: [
          {}, {}, {}, {}
        ]
      }
    }
  }

  return News
})